<template>
	<view class="user">
		<scroll-view scrollY class="user-scroll" @scrolltolower="reachBottom">
			<view class="user-info">
				<view class="user-info-title">
					歌手
				</view>
				<view class="user-info-main" v-for="(item, index) in artist" :key="index" @tap="userinfo(item.id)">
<!-- 				{{item}} -->
					<!-- 头像和歌手名字 -->
					<view class="user-info-main-avatar">
						<image :src="item.img1v1Url" mode=""></image>
						<view class="user-info-main-avatar-title">
							<view class="user-info-main-avatar-title-authername">
								<text>{{item.name}}</text>
								<text v-if="item.alias.length !== 0">({{item.alias[0]}})</text>

							</view>
						</view>
					</view>

					<!-- 右边关注按钮 -->
					<view class="user-info-main-artistText">
						<text>+</text>
						<text>关注</text>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: ['artist'],
		methods:{
			reachBottom(){
				this.$parent.$parent.$parent.$parent._getmylist()
			},
			userinfo(id){
				uni.navigateTo({
					url: "/view/UserInfo/UserInfo?id=" + id
				})
			}
		},
	}
</script>

<style lang="scss">
	.user {
		padding: 0 30rpx;
		&-scroll{
			height: calc(100vh - 84px);
		}
		&-info {
			display: flex;
			flex-direction: column;
			padding: 30upx 0 0 0;
			box-sizing: border-box;
			border-bottom: 1px solid #E5E5E5;

			&-title {
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				background-color: #fff;
				padding: 30upx;
				font-weight: 600;
				font-size: 17px;
			}

			&-main {
				background-color: #fff;
				display: flex;
				align-items: center;
				padding: 20upx 30upx;
				justify-content: space-between;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;

				// 头像和歌手名字等信息
				&-avatar {
					display: flex;
					align-items: center;

					image {
						width: 100upx;
						height: 100upx;
						border-radius: 100%;
					}

					&-title {
						margin-left: 20rpx;

						&-authername text:nth-child(1) {
							display: block;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

						}
					}
				}


				// 关注按钮
				&-artistText {
					display: flex;
					color: #B23B57;
					align-items: center;
					border: 1px solid #B23B57;
					border-radius: 20px;
					padding: 1px;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;

					text {
						margin: 0 6upx;
					}
				}
			}

		}
	}
</style>
